<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'
import { ref } from 'vue'

const activeIndex = ref('1')
const activeIndex2 = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>
<template>
    <el-menu :default-active="activeIndex2" class="el-menu-demo centered-menu" mode="horizontal"
        background-color="#001f3f" router text-color="#ffffff" active-text-color="#ff851b" @select="handleSelect"
        style="width: 100%; position: fixed; top: 0; left: 0; z-index: 999;">
        <!-- 菜单项 -->
        <el-menu-item index="PatientShowView">患者信息管理页</el-menu-item>
        <el-menu-item index="DepartmentOneView">科室</el-menu-item>
        <el-menu-item index="HospitalShowView">医院管理</el-menu-item>
    </el-menu>
    <!-- 页面主体内容，避开菜单高度 -->
    <div style="margin-top: 60px;">
        <RouterView />
    </div>
</template>

<style scoped>
.el-menu-demo {
    height: 60px;
}

.centered-menu {
    display: flex;
    justify-content: center;
}

/* 确保子菜单也居中 */
.centered-menu .el-sub-menu__title,
.centered-menu .el-menu-item {
    padding: 0 20px;
}
</style>